<template>
    <base-page>
		<view slot="header">
			<!-- #ifdef MP-WEIXIN -->
			<cu-custom :isBack="true" bgColor="bg-white">
			    <block slot="content">平台客服</block>
			</cu-custom>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<block >
			    <cu-custom :isBack="true" bgColor="bg-white">
			        <block slot="content">平台客服</block>
			    </cu-custom>
			</block>
			<!-- #endif -->
		</view>
        <view slot="center" class="auto-100 ">
            
            <view class="section">
                <view class="common-issue">
                    <view class="txt">常见问题</view>
                    <view class="problems df-cen-rl">
                        <view v-for="(item, idx) in qsList" :key="idx" @click="goQs(item,idx)" class="problem-item">
                            <uni-button class="cu-btn line-gray problem-item">{{item.name}}</uni-button>
                        </view>
                    </view>
                </view>
                <view class="helper-wrapper df-cen-rl">
                    <view class="helper flex1" @click="toservicechat">
                        <text class="help-txt-left">在线客服</text>
                        <text class="help-txt-right">使用有问题？联系在线客服</text>
                    </view>
                    <view class="icon">
                        <image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/setting/rightarrow.png">
                    </view>
                </view>
                <view class="helper-wrapper df-cen-rl">
                    <view class="helper flex1">
                        <text class="help-txt-left">电话客服</text>
                        <text class="help-txt-right">服务时间 9:00-18:00</text>
                    </view>
                    <view class="icon">
                        <image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/setting/rightarrow.png">
                    </view>
                </view>
            </view>
        </view>
    </base-page>
</template>

<script>
export default {
    data() {
        return {
            qsList: [
                {
                    name: '下单须知'
                },
                {
                    name: '内容发布'
                },
                {
                    name: '发货问题'
                },
                {
                    name: '订单问题'
                },
                {
                    name: '资产管理'
                },
                {
                    name: '其他问题'
                },
            ]
        };
    },
    onLoad(e) { },
    onShow(e) { },
    methods: {
		goQs(item){
			console.log(item)
		},
		toservicechat() {
			this.$Router.push({
				path: '/chatPages/servicechat/servicechat',
				query: {
					servicer_id: 0
				}
			});
		}
	},
    mounted() { }
};
</script>

<style lang="scss">
.icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    image {
        width: 100%;
        height: 100%;
    }
}
.section {
    .common-issue {
        border-bottom: 5px solid #f4f4f4;
        padding: 20px 15px 0;
        .problems {
            flex-wrap: wrap;
            margin-bottom: 20px;
            > .problem-item {
                text-align: center;
                width: 33%;
                margin-bottom: 10px;
                color: black;
            }
        }
        .txt {
            margin-bottom: 20px;
            color: #333333;
            font-size: 16px;
            font-weight: bold;
        }
    }
    .helper-wrapper {
        padding: 15px 15px 15px;
        border-bottom: 1px solid #f4f4f4;
        .helper {
            .help-txt-left {
                font-size: 15px;
                color: #222222;
                margin-right: 20px;
            }
            .help-txt-right {
                font-size: 12px;
                color: #999999;
            }
        }
    }
}
</style>
